<script setup lang="ts">
  import { PropType } from "vue";
  import Upload from "@/components/Upload.vue";
  defineProps({
    modelValue: { type: Array as PropType<gt.components.Banner[]>, required: false, default: [], },
    disabled: { type: Boolean }
  });
</script>
<template>
  <div class="wf oh Banner">
    <el-carousel>
      <el-carousel-item v-for="(a, ai) in modelValue" :key="ai" class="whf">
        <img :src="a.url" />
      </el-carousel-item>
    </el-carousel>
    <Upload v-if="!disabled" class="pa" accept="image/*" :list="modelValue" />
  </div>
</template>
<style lang="scss" scoped>
  .Banner {
    position: relative;
    aspect-ratio: 2;
    >.el-carousel {
      height: 100%;
      width: 100%;
      :deep(.el-carousel__container) {
        width: 100%;
        height: 100%;
        >.whf {
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            // border: 1px solid #0ff;
          }
        }
      }
    }
    >.pa {
      bottom: 0;
    }
  }
</style>